<script setup lang="ts">
import router from "../Router";
import Footer from "../components/BusinessFooter.vue";
import {ref} from "vue";
import CustommerFooter from "../components/CustommerFooter.vue";
import {
  customerAddOrder,
  browseOrderLineItem,
  customerlistOrder,
  customerSelectShopItem
} from "../network/api.ts";
import {useRoute} from "vue-router";

const route = useRoute()
let username = ref()
let orderArr = ref()
let user = ref({
  id:sessionStorage.getItem("userId")
})
username.value = sessionStorage.getItem("username")

customerlistOrder(user.value).then(res=>{
  orderArr.value = res.data.oorders
  for(let i =0;i< orderArr.value.length;i++){
    browseOrderLineItem(orderArr.value[i].id).then(res=>{
      orderArr.value[i].lineItems = res.data
    })
  }
  console.log(orderArr.value)
})

function toPayPage(index){
  router.push({
    path:"/customer/pay",
    query:{
      shopId:route.query.shopId,
      orderId:orderArr.value[index].id,
      payStatus:orderArr.value[index].payStatus
    }
  })
}
</script>

<template>
  <header class="title flex justify-center items-center bg-orange-3 border-orange-600 ">
    <div class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{username}} 的 </p>
      <h1>Orders</h1>
    </div>
  </header>
  <el-table :data="orderArr" height="570" style="width:100% "
            class="select-none"
  >
    <el-table-column label="0:未支付&nbsp; |&nbsp; 1:已支付&nbsp; |&nbsp; 3:商家已确认&nbsp; |&nbsp; 4:已退款">
      <el-table-column type="expand" width="30" style="margin-right: 3vw; ">
        <template #default="props">
          <el-table :data="props.row.lineItems" style="width:100% ;margin-left: 15vw; " >
            <el-table-column type="index" width="1"/>
            <el-table-column  prop="itemName" label="item" width="120" align="center"/>
            <el-table-column  prop="shopName" label="shop" width="110" align="center"/>
            <el-table-column  prop="quantity" label="已选数量" width="55" align="center"/>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="index" width="30"/>
      <el-table-column  prop="createTime" label="创建时间" width="140" align="center"/>
      <el-table-column  prop="payStatus" label="订单状态" width="60" align="center"/>
      <el-table-column label="操作"  width="130" align="center">
        <template #default="scope">
          <el-button type="warning" color="#fdba74"
                     @click="toPayPage(scope.$index)"
          >
            <div class="text-white">进入</div>
          </el-button>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>

  <custommer-footer></custommer-footer>



</template>

<style scoped>

</style>